<!-- 回到顶部的按钮 -->
<template>
  <div v-if="showTop">
    <div
      class="mescroll-totop"
      :class="[showTop ? 'mescroll-totop-in' : 'mescroll-totop-out']"
      mode="widthFix"
      @click="toTop"
    >
      <div class="icon icon-dingbu"></div>
    </div>
  </div>
</template>


<script lang="ts">
export default {
  name: "to-top",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    modelValue?: boolean;
  }>(),
  {
    modelValue: false,
  }
);

const showTop = ref<boolean>(props.modelValue);

const emit = defineEmits(["change"]);

const toTop = () => {
  emit("change");
};

const scroll = (e: any) => {
  if (e.scrollTop > 400) {
    showTop.value = true;
  } else {
    showTop.value = false;
  }
};

defineExpose({ scroll });
</script>

<style scoped>
/* 回到顶部的按钮 */
.mescroll-totop {
  position: fixed;
  bottom: 150rpx;
  right: 30rpx;
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  border-radius: 50rpx;
  transition: all 0.3s ease-in-out;
  z-index: 99;
}

.mescroll-totop .icon {
  font-size: var(--base-size-small-x);
  color: #ffffff;
}

/* 显示 -- 淡入 */
.mescroll-totop-in {
  opacity: 1;
}

/* 隐藏 -- 淡出且不接收事件*/
.mescroll-totop-out {
  opacity: 0;
  pointer-events: none;
}
</style>
